<section class="content-header">
  <h1>
      {{title}}
      <!-- <small>Control panel</small> -->
  </h1>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
      <div class="col-md-3 col-md-push-9">
          <div class="box box-default">
              <div class="box-header with-border">
                  <h3 class="box-title">查询区域</h3>
                  <div class="box-tools pull-right">
                      <button type="button" class="btn btn-box-tool" data-widget="collapse">
                          <i class="fa fa-minus"></i>
                      </button>
                  </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                  <div class="form-group">
                      <label>区域</label>
                      <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
                          [(selectedItem)]="subAareSelected" [value]="subAreaItems[0]" [searchEnabled]="true" (onValueChanged)="onSubAreaSelectedChange($event,1)">
                      </dx-select-box>
                  </div>
                  <div class="form-group">
                      <label>设备</label>
                      <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
                          displayExpr="equipment" placeholder="请选择工位" [showClearButton]="true" [dataSource]="equipemntItems">
                          <dxo-drop-down-options [width]="510" [height]="340"></dxo-drop-down-options>
                          <div *dxTemplate="let data of 'content'">
                              <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                              <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                              <dx-data-grid #ddg [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                                  [filterRow]="{ visible: true }" [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }"
                                  [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                                  <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                                  <dxi-column dataField="equipmentType" caption="设备类型" [width]="100">
                                  </dxi-column>
                                  <dxi-column dataField="supplier" caption="供应商" [width]="100">
                                  </dxi-column>
                                  <dxi-column dataField="stationCode" caption="工位" [width]="100">
                                  </dxi-column>
                                  <dxi-column dataField="equipment" caption="设备" [width]="100">
                                  </dxi-column>
                              </dx-data-grid>
                          </div>
                      </dx-drop-down-box>
                  </div>
              </div>
              <div class="box-footer">
                  <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
              </div>
          </div>
      </div>
      <div class="col-md-9 col-md-pull-3">

          <div class="box box-default">
              <div class="box-header with-border">
                  <h3 class="box-title">{{title}}</h3>
                  <div class="box-tools pull-right">
                      <button type="button" (click)="updateDetail()" class="btn btn-info btn-sm" data-toggle="tooltip" title="更新此模版">
                          <i class="fa fa-save"></i>
                      </button>
                      <button type="button" class="btn btn-box-tool" data-widget="collapse">
                          <i class="fa fa-minus"></i>
                      </button>
                  </div>
              </div>
              <!-- /.box-header -->
              <div class="box-body">
                  <dx-data-grid #dataGrid [dataSource]="items" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                      <dxo-paging [pageSize]="12"></dxo-paging>
                      <dxo-editing mode="cell" [allowUpdating]="true">
                      </dxo-editing>
                      <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
                      </dxo-pager>
                      <dxo-filter-row [visible]="true" [applyFilter]="auto"></dxo-filter-row>
                        <dxo-editing mode="cell" [allowUpdating]="true">
                        </dxo-editing>
                      <dxi-column [allowEditing]="false" dataField="subArea" caption="区域">
                      </dxi-column>
                      <dxi-column [allowEditing]="false" dataField="opName" caption="设备">
                      </dxi-column>
                      <dxi-column [allowEditing]="false" dataField="partTypeId" caption="partTypeId">
                      </dxi-column>
                      <dxi-column [allowEditing]="false" dataField="partTypeDescription" caption="partType">
                      </dxi-column>
                      <dxi-column [allowEditing]="true" dataField="cleanCt" caption="cleanCt">
                      </dxi-column>
                      <dxi-column [allowEditing]="false" dataField="generatedTime" caption="generatedTime">
                      </dxi-column>
                      <dxi-column [allowEditing]="true" dataField="description" caption="描述">
                      </dxi-column>
                  </dx-data-grid>
              </div>
          </div>

      </div>
  </div>

</section>